import { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { useNavigate, useLocation } from 'react-router'
import { IMenus } from '@/router/route.ts'
import { Icon } from '@/components/web-react'
interface IProps {
  children?: ReactNode
  menuList: Array<IMenus>
}

const Menu: FC<IProps> = (props) => {
  const { menuList } = props
  const navigate = useNavigate()
  const location = useLocation()
  return (
    <ul className={'w-full h-auto select-none'}>
      {menuList?.map((item: IMenus) => (
        <li
          className={
            'text-[13px] text-gray-800 h-[36px] my-1 first:mt-2 cursor-pointer flex items-center rounded hover:bg-primary-600 hover:text-base-plate transition-colors duration-100 ' +
            `${item.path === location.pathname && 'bg-primary-600 text-white'}`
          }
          key={item.key}
          onClick={() => {
            navigate(item.path as string)
          }}
        >
          <span className={'mx-1'}>
            <Icon color={'#9a9ab0'} size={18} name={item.icon as string}></Icon>
          </span>
          <span className={'ml-2'}>{item.label}</span>
        </li>
      ))}
    </ul>
  )
}

export default memo(Menu)
